/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro';
import { Swiper } from '@tarojs/components';

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Toast} from '../../../library/func';
import Icon from '../../../project/style/icon';
import Http from '../../../project/func/http/http';
import '../../../library/style/patch.css';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/
export default class Make extends Component {

	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
		}
    }


	/**
	 * 渲染
	 */
	render() {
        
        // 接收方法
        // const IonClick = this.props.IonClick ? this.props.IonClick : {};
        // const TonClick = this.props.TonClick ? this.props.TonClick : {};
        // const VonClick = this.props.VonClick ? this.props.VonClick : {};
        const CRowStyle = 'position:absolute;z-index:3;width:369rpx;flex:1;border-radius:50rpx;background-color:#fff;';
        const CAroundStyle = 'position:absolute;z-index:3;width:369rpx;';
        const CHandStyle = 'border-radius:8rpx;background-color:#fff;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);';
        const CAroundStyle2 = 'position:relative;z-index:4;background-color:#fff;flex:1;border-radius:50rpx;';

		// 渲染
		return (
			<CColumn x='center' y='center' class='f1' rel mt='10'>
                <CHand x='center' y='center' w='25' h='25' mb='15' ra='50' bg='#b8b8b8' onClick={ this.props.onAdd }>
                    <CSvg w='16' h='16' color='#404040'  icon={Icon.addtwo} />
                </CHand>
                        
                {/* 控制浮框是否显示 */}
                { this.props.showBool ? (
                    //  显示 弹出控件 
                    <CRow style={this.props.upDirection ? CRowStyle+'bottom:120rpx;box-shadow:4rpx 1rpx 2rpx #ededed;' : CRowStyle+'top:90rpx;box-shadow:-4rpx -1rpx 2rpx #ededed;'} x='center' y='center'>
                        {/* 三角 */}
                        <CAround style={this.props.upDirection ? CAroundStyle+'bottom:-6rpx' : CAroundStyle+'top:-6rpx'} x='center' y='center'>
                            <CHand w='30' h='30' style={this.props.upDirection ? CHandStyle + 'box-shadow:2rpx 2rpx 5rpx #ededed;' : CHandStyle+'box-shadow:-2rpx -2rpx 5rpx #ededed;'} ></CHand>
                        </CAround>
                        {/* 图片、文字、视频 */}
                        <CAround px='10' h='50' style={this.props.upDirection ? CAroundStyle2 + 'box-shadow:-4rpx -4rpx 13rpx #ededed;' : CAroundStyle2 + 'box-shadow:4rpx 4rpx 13rpx #ededed;'} >
                            <CHand class='f1' onClick={this.props.onAddimg}>
                                <CItemY class='f1' x='center' y='center'>
                                    <CSvg w='22' h='22' mb='2' color='#dac261' icon={Icon.picture} />
                                    <CHand size='12' color='#373739'>图片</CHand>
                                </CItemY>
                            </CHand>
                            <CHand class='f1' onClick={ this.props.onAddtext }>
                                <CItemY class='f1' x='center' y='center'>
                                    <CSvg w='26' h='26' mb='2' color='#dac261' icon={Icon.text} />
                                    <CHand size='12' color='#373739'>文字</CHand>
                                </CItemY>
                            </CHand>
                            {
                                this.props.videoBool ? (
                                    <CHand class='f1' onClick={ this.props.onAddVideo }>
                                        <CItemY class='f1' x='center'>
                                            <CSvg w='21' h='21' mb='2' color='#dac261' icon={Icon.videotwo} />
                                            <CHand size='12' color='#373739'>视频</CHand>
                                        </CItemY>
                                    </CHand>
                                ) : (null)
                            }
                            
                        </CAround>
                    </CRow>
                    
                 ) : (
                    //  不显示 弹出控件 
                    null) }
                
			</CColumn>
		);
	}
};


